<template>
  <div class="product" style="display: block">
    <!-- 顶部导航栏 -->
    <div class="Pheader">
      <van-sticky>
        <van-nav-bar
          title="服务产品"
          left-text="返回"
          left-arrow
          @click-left="BtnBack"
        />
      </van-sticky>
    </div>
    <div class="main-content">
      <!-- 左边导航栏 -->
      <div class="left_sidebar">
        <div class="sidebarBox">
          <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item
              v-for="categoryItem in categoryData"
              :key="categoryItem.id"
              :title="categoryItem.name"
            />
          </van-sidebar>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right_content">
        <van-card
          v-for="item in productData.list"
          :key="item.id"
          :price="item.price + '.00'"
          :desc="item.description"
          :title="item.name"
          :thumb="item.photo"
        >
          <!-- <template #tags>
            <van-tag
              plain
              :type="item.status == '正常' ? 'primary' : 'danger'"
              >{{ item.status }}</van-tag
            >
            
          </template> -->
          <template #footer>
            <van-stepper
              :min="0"
              default-value="0"
              v-model="item.number"
              theme="round"
              button-size="22"
              disable-input
              @change="onChangeNumber(item)"
            />
          </template>
        </van-card>

        <!-- {{total}} -->
        <van-submit-bar
          :price="total * 100"
          button-text="提交订单"
          @submit="onSubmit"
        />
      </div>
    </div>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";

// 引入vuex的辅助函数
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      //数量
      value: 0,
      activeKey: this.$route.query.activeKey,
      // 分类编号
      productCategoryId: undefined,
    };
  },
  methods: {
    // 引入category vuex中的方法
    ...mapActions("category", ["getAllCategoryData"]),
    // 引入peoduct vuex中的方法
    ...mapActions("product", ["getAllProductData"]),
    // 引入shopcart vuex中的方法
    ...mapMutations("shopcart", ["addShopcart", "clearShopcart"]),

    //提交订单 页面
    onSubmit() {
      this.$router.push({
        path: "/manager/orderConfirm",
      });
    },
    //数量变化
    onChangeNumber(product) {
      // console.log(product);

      // 定义一个产品参数
      let orderLine = {
        productId: product.id,
        productName: product.name,
        price: product.price,
        number: product.number,
      };
      // console.log(orderLine);
      this.addShopcart(orderLine);
    },
    //切换侧边导航栏  获取对应的产品数据
    onChange(index) {
      // console.log(this.categoryData[index].id);
      //修改分类编号
      this.productCategoryId = this.categoryData[index].id;
      //获取对应 分类编号 的全部数据
      this.getProductData();
    },
    //返回按钮
    BtnBack() {
      this.$router.go(-1);
    },

    //获取全部栏目
    getAllCategory() {
      let data = {
        page: 1,
        pageSize: 100,
      };
      // console.log(data);
      this.getAllCategoryData(data);
    },

    //根据分类编号 page pageSize获取数据
    getProductData() {
      let params = {
        page: 1,
        pageSize: 100,
        productCategoryId: this.productCategoryId,
      };
      // console.log(data);
      this.getAllProductData(params);
    },
  },

  created() {
    this.productCategoryId = this.$route.query.productCategoryId;
    this.getProductData();
    this.getAllCategory();
  },
  computed: {
    // 引入栏目数据  和 对应产品数据
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),

    //获取订单总价钱
    ...mapGetters("shopcart", ["total"]),
  },
};
</script>

<style lang="less">
.Pheader {
  // position: relative;

  .van-sticky--fixed {
    z-index: 999;
    background: #fff;
  }
  .van-nav-bar__content{
    background-image: linear-gradient(to top, #df89b5 5%, #bfd9fe 100%);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    // color: white;
    .van-nav-bar__title{
      color: white;
    }
  }
  // .van-sticky {
  //   .van-nav-bar {
  //     .van-nav-bar__content {
  //       border-bottom-left-radius: 10px;
  //       border-bottom-right-radius: 10px;
  //     }
  //   }
  // }
}
div .manager {
  padding-bottom: 15vh;
}
.van-tabbar {
  height: 7vh;
}
.main-content {
  padding-bottom: 8vh;
  display: flex;
  .left_sidebar {
    flex: 1;
    //
    // text-align: center;
    .sidebarBox {
      width: 100%;
      height: 100%;

      .van-sidebar {
        position: fixed;

      }
    }
  }
  .right_content {
    flex: 3;
    padding-right: 5px;

    .van-submit-bar {
      bottom: 7vh;
    }
  }
}
.van-card__price-currency,
.van-card__price-integer,
.van-card__price-decimal {
  color: red;
}
.van-card__header {
  position: relative;
  height: 100%;
}
.van-card {
  // background-image: linear-gradient(to top, #df89b5 0%, #bfd9fe 100%);
  box-shadow: 0px 0px 5px 0 gray;
  border-radius: 8px;
  position: relative;
  .van-card__footer {
    position: absolute;
    right: 1vw;
    bottom: 1.8vw;
  }
}
</style>